<template>
  <van-cell-group>
    <div class="book-details-container">
      <div class="book-header">
        <img :src="bookImage" alt="书籍图片" class="book-image" />
        <div class="book-info">
          <div class="book-title">{{ book.title }}</div>
          <div class="book-author">作者: {{ book.author }}</div>
          <div class="book-year">年份: {{ book.year }}</div>
          <div class="book-description">{{ book.description }}</div>
        </div>
      </div>
      <div class="book-content">
        <h3>内容简介</h3>
        <p>{{ book.content }}</p>
      </div>
    </div>
  </van-cell-group>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { books } from '@/config/constant'

const route = useRoute()
const bookId = parseInt(route.params.id)
const book = ref(books.find(b => b.id === bookId))

const bookImage =
  '' // 这里可以放置书籍图片的链接
</script>

<style scoped>
.book-details-container {
  padding: 16px;
  background-color: #f9f9f9;
}

.book-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.book-image {
  width: 100px;
  height: 150px;
  margin-right: 16px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.book-info {
  flex: 1;
}

.book-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.book-author,
.book-year {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.book-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.book-content {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.book-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.book-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
</style>
